<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
<h:form id="detail_product_form">
    <p:dialog id="detail_dialog" widgetVar="detail_dialog">
        <h:panelGrid id="detail_grid" columns="3">
            <h:panelGrid id="name_grid">
                <p:outputLabel id="name_label" for="name_input" value="Name"/>
                <h:outputText id="name_input" value="#{productTableBean.selectedProduct.name}"/>
            </h:panelGrid>
            <h:panelGrid id="description_grid">
                <p:outputLabel id="description_label" for="description_input"  value="description"/>
                <h:outputText id="description_input" value="#{productTableBean.selectedProduct.description}"/>
            </h:panelGrid>
            <h:panelGrid id="raiting_grid">
                <p:outputLabel id="raiting_label" for="raiting_input"  value="Qualiti rating"/>
                <h:outputText id="raiting_input" value="#{productTableBean.selectedProduct.qualityRating}"/>
            </h:panelGrid>
        </h:panelGrid>
        <h:outputLabel value="Cotains products"/>
        <p:dataTable id="dataTable" var="product" value="#{productTableBean.containsProductList}" widgetVar="productDetailTable"
                     emptyMessage="No products found with given criteria"
                     paginator="true" rows="5"
                     paginatorTemplate="{CurrentPageReport} {PageLinks} {RowsPerPageDropdown}"
                     paginatorPosition="bottom"
                     rowsPerPageTemplate="3,5,10,20">
            <f:facet name="header">
            </f:facet>

            <p:column id="productIDColumn" filterBy="#{product.productID}"
                      headerText="Product ID"  filterMatchMode="contains">
                <h:outputText value="#{product.productID}" />
            </p:column>

            <p:column id="nameColumn" filterBy="#{product.name}"
                      headerText="Name" filterMatchMode="contains" >
                <p:commandLink value="#{product.name}" actionListener="#{productTableBean.setSelectedProduct(product)}" immediate="true"/>
            </p:column>

            <p:column id="descriptionColumn" filterBy="#{product.description}"
                      headerText="Description"
                      filterMatchMode="contains">
                <h:outputText value="#{product.description}" />
            </p:column>

            <p:column id="qualityRatingColumn" filterBy="#{product.qualityRating}"
                      headerText="Quality Rating" filterMatchMode="endsWith">
                <h:outputText value="#{product.qualityRating}"/>
            </p:column>
        </p:dataTable>
    </p:dialog>

</h:form>
</html>
